<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>GNDEC</title>

<style type="text/css">
html {
  background-color: #282828;
/*  background-image:url('../build.jpg');
*/
}

body {
  font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 55%;
  padding: 20px 40px 40px;
  margin: 0 auto;
  margin-top: 15px;
  border: 1px solid #ccc;
  background-color:#585858;
}

h1 {
  color: #fff000;
}

h2 {
  color: #33FF00;
  
}

.section, .item {
  padding: 0px 15px;
}

.item {
  background-color: #282828;
  border: 1px solid #ddd;
  margin-bottom: 4px;
  padding: 5px 15px;
}
/*
.column
{
  border:1px;
  margin-bottom:4px;
  padding:5px 15px;
}
*/
.helptext {
  color: #999;
  padding-left: 10px;
}

a.delete:hover {
  color: red;
}
p
{
color:#FFF000; 
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
  // Code adapted from http://djangosnippets.org/snippets/1389/

  function updateElementIndex(el, prefix, ndx) {
    var id_regex = new RegExp('(' + prefix + '-\\d+-)');
    var replacement = prefix + '-' + ndx + '-';
    if ($(el).attr("for")) $(el).attr("for", $(el).attr("for").replace(id_regex,
 replacement));
    if (el.id) el.id = el.id.replace(id_regex, replacement);
    if (el.name) el.name = el.name.replace(id_regex, replacement);
  }

  function deleteForm(btn, prefix) {
    var formCount = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());

    if (formCount > 1) {
      // Delete the item/form
      $(btn).parents('.item').remove();

      var forms = $('.item'); // Get all the forms

      // Update the total number of forms (1 less than before)
      $('#id_' + prefix + '-TOTAL_FORMS').val(forms.length);

      var i = 0;
      // Go through the forms and set their indices, names and IDs
      for (formCount = forms.length; i < formCount; i++) {
        $(forms.get(i)).children().children().each(function() {
          updateElementIndex(this, prefix, i);
        });
      }

    } // End if
    else {
        alert("You have to enter at least one todo item!");
    }
    return false;
  }


  function addForm(btn, prefix) {
    var formCount = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());

    // You can only submit a maximum of 30 todo items 
    if (formCount < 30) {
      // Clone a form (without event handlers) from the first form
      var row = $(".item:first").clone(false).get(0);
      // Insert it after the last form
      $(row).removeAttr('id').hide().insertAfter(".item:last").slideDown(300);
      
      // Remove the bits we don't want in the new row/form
      // e.g. error messages
      $(".errorlist", row).remove();
      $(row).children().removeClass('error');
      
      // Relabel/rename all the relevant bits
      $(row).children().children().each(function() {
        updateElementIndex(this, prefix, formCount);
        if ( $(this).attr('type') == 'text' )
          $(this).val('');
      });
      
      // Add an event handler for the delete item/form link 
      $(row).find('.delete').click(function() {
        return deleteForm(this, prefix);
      });

      // Update the total form count
      $('#id_' + prefix + '-TOTAL_FORMS').val(formCount + 1); 

    } // End if
    else {
      alert("Sorry, you can only enter a maximum of ten items.");
    }
    return false;
  }

  // Register the click event handlers
  $("#add").click(function() {
    return addForm(this, 'form');
  });
  
  $(".delete").click(function() {
    return deleteForm(this, 'form');
  });


});
</script>

<link href='style.css' rel='stylesheet' type='text/css'><link href='{{ MEDIA_URL }}calendar/datepick/redmond.datepick.css' rel='stylesheet' type='text/css'><script type='text/javascript' src='{{ MEDIA_URL }}calendar/datepick/jquery.datepick.js'></script><script>
 $(document).ready(function(){
   $('#id_Date_of_testing').datepick({dateFormat:'yyyy-mm-dd'});
 });
 </script>

</head>
<body>

<h1>TEST REPORT</h1>


<form action="" method="POST">{% csrf_token %}
    <div class="section">
        {{ report_form.as_p }}
    </div>

    <h2>Report</h2>
	
    {{ todo_item_formset.management_form }}
    {% for form in todo_item_formset.forms %}
    <div class="item">
		{{ form.as_p }}
		<p style=""><a class="delete" href="#">Delete</a></p>  
	</div>
    {% endfor %}
    {{ chem_analysis_formset.management_form }}
    {% for form in chem_analysis_formset.forms %}
    <div class="item">
		{{ form.as_p }}
		<p style=""><a class="delete" href="#">Delete</a></p>  
	</div>
    {% endfor %}

    {{ water_formset.management_form }}
    {% for form in water_formset.forms %}
    <div class="item">
		{{ form.as_p }}
		<p style=""><a class="delete" href="#">Delete</a></p>  
	</div>
    {% endfor %}

    {{ brick_formset.management_form }}
    {% for form in brick_formset.forms %}
    <div class="item">
		{{ form.as_p }}
		<p style=""><a class="delete" href="#">Delete</a></p>  
	</div>
    {% endfor %}

    {{ Soil_ohsr_formset.management_form }}
    {% for form in Soil_ohsr_formset.forms %}
    <div class="item">
		{{ form.as_p }}
		<p style=""><a class="delete" href="#">Delete</a></p>  
	</div>
    {% endfor %}

    {{ soil_building_formset.management_form }}
    {% for form in soil_building_formset.forms %}
    <div class="item">
		{{ form.as_p }}
		<p style=""><a class="delete" href="#">Delete</a></p>  
	</div>
    {% endfor %}

    {{ Mixture_formset.management_form }}
    {% for form in Mixture_formset.forms %}
    <div class="item">
		{{ form.as_p }}
		<p style=""><a class="delete" href="#">Delete</a></p>  
	</div>
    {% endfor %}


    {{ Cement_ppc_formset.management_form }}
    {% for form in Cement_ppc_formset.forms %}
    <div class="item">
		{{ form.as_p }}
		<p style=""><a class="delete" href="#">Delete</a></p>  
	</div>
    {% endfor %}

    {{ Cement_opc_33_formset.management_form }}
    {% for form in Cement_opc_33_formset.forms %}
    <div class="item">
		{{ form.as_p }}
		<p style=""><a class="delete" href="#">Delete</a></p>  
	</div>
    {% endfor %}

    {{ Cement_opc_43_formset.management_form }}
    {% for form in Cement_opc_43_formset.forms %}
    <div class="item">
		{{ form.as_p }}
		<p style=""><a class="delete" href="#">Delete</a></p>  
	</div>
    {% endfor %}

    {{ Cement_opc_53_formset.management_form }}
    {% for form in Cement_opc_53_formset.forms %}
    <div class="item">
		{{ form.as_p }}
		<p style=""><a class="delete" href="#">Delete</a></p>  
	</div>
    {% endfor %}

    <p><a id="add" href="#">Add Row</a></p>

    <input type="submit" value=" Submit " />

</form>

</body>
</html>
